<!--  -->
<template>
  <div class="Articlefl maincon">
    <!-- 搜索 -->
    <el-card shadow="hover" class="topsearch">
      <el-row>
        <el-form :inline="true" ref="types" >
          <el-form-item label="分类筛选">
            <el-select
                size="small"
                style="width: 100%"
                v-model="types.fid"
                placeholder="请选择物品种类"
                @change="select(types.fid)"
            >
              <el-option
                  v-for="(item, index) in types"
                  :key="index"
                  :label="item.title"
                  :value="item.fid"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="菜名搜索">
            <el-input
                size="small"
                v-model="name"
                placeholder="输入菜名"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="load"
            >搜索</el-button>
            <el-button size="small" icon="el-icon-refresh" @click="resetForm"
            >重置</el-button>
          </el-form-item>
          <el-button  type="text"  icon="el-icon-circle-plus" @click="add">新增数据</el-button>
        </el-form>
      </el-row>
    </el-card>
<!--    正文-->
    <el-card shadow="hover" class="treetable">
      <el-row :gutter="15" class="rowlist">
        <el-col
            :md="24"
            :lg="{ span: '4-8' }"
            :xl="12"
            v-for="(item, index) in tableData"
            :key="index">
          <el-descriptions
              class="margin-top rowitem"
              :column="1"
              direction="vertical"
              size="mini"
              :colon="false"
              :labelStyle="{ 'font-weight': 'bold', 'font-size': '14px' }">

            <el-descriptions-item
                :labelStyle="{ 'font-size': '16px' }"
                labelClassName="label16">
              <el-image
                style="width: 100%; height: 100%"
                :src="item.imgurl"
                :fit="fit"></el-image>
            </el-descriptions-item>
            <el-descriptions-item label=" 名称：" :span="2">{{
                item.name
              }}</el-descriptions-item>
            <el-descriptions-item label=" 写入时间：" :span="2">
              {{ item.time}}</el-descriptions-item
            >
          </el-descriptions>
          <div class="listbtn">
            <el-button style="color: #36b206" type="text" @click="$router.push('/mother/foodDetails?id='+item.id)"
            >详情</el-button
            >
            <el-button type="text" @click="handleEdit(item)">编辑</el-button>
            <el-button style="color: red" type="text" @click="deleteRow(item.id)"
            >删除</el-button
            >
          </div>
        </el-col>
      </el-row>

<!--      编辑框-->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="45%"
    >
      <el-form label-width="80px"   ref="form" :model="form">
        <el-form-item label="封面" >
          <el-upload
              class="avatar-uploader"
              action="http://localhost:9090/files/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              >
            <img v-if="form.imgurl" :src="form.imgurl" style="width: 45%; height: 45%">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="名称" >
          <el-input v-model="form.name" ></el-input>
        </el-form-item>
        <el-form-item label="菜品概述" >
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="form.brief">
          </el-input>
        </el-form-item>
        <el-form-item label="诱发疾病" >
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="form.disease">
          </el-input>
        </el-form-item>
        <el-form-item label="标签分类" >
          <el-select v-model="form.cover" placeholder="请选择">
            <el-option
                v-for="item in  types"
                :key="item.id"
                :label="item.title"
                :value="item.fid">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleSave">确 定</el-button>
  </span>
    </el-dialog>


      <!--    分页-->
      <div style="padding: 10px 0">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5,10,20,50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import request from "@/router/request";

export default {
  data() {
    return {
      name:"",
      cover:"",
      tableData:{},
      types:{},
      form:{},
      dialogVisible: false
    };
  },
  created() {
    this.load()
    this.typeText()
  },
  methods: {
    load(){
      request.get("/food",{
        params:{
          pageNum: this.pageNum,
          pageSize:this.pageSize,
          name:this.name,
        }
      }).then(res=>{
        this.tableData=res.data.records
        this.total = res.data.total
        this.typeText()
      })
    },
    //加载分类标签
    typeText(){
      request.get("/ftype").then(res=>{
        this.types=res.data
      })
    },
    //弹出新增/编辑 窗口的按钮
    add(){
      this.dialogVisible=true;
      this.form={}
    },


    //弹出框编辑
    handleEdit(row){
      console.log(row)
      this.form=row
      this.dialogVisible=true
    },

    //   修改/新增
    handleSave(){
      if (this.form.id){//id存在为修改
        request.put("/food",this.form).then(res=>{
          if (res.state ==='0'){
            this.$message.success("修改成功");
            this.dialogVisible=false
            console.log(res)
          }else {
            this.$message.error("发生未知异常,修改失败")
          }
          //刷新页面，无论成败
          this.load()
        })
      }else {//id不存在为新增
        request.post("/food",this.form).then(res=>{
          if (res.state==='0'){
            console.log(this.$message.success("新增数据成功"))
            this.dialogVisible=false
          }else {
            console.log(this.$message.error("发生未知错误，新增失败"))
          }
        })
      }
    },


    //删除
    deleteRow(id){
      console.log("大叔大树大所大所大所大所多"+id);
      this.$confirm("确定要删除吗?", "信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(() => {
            request.delete("/food/"+id).then(res=>{
              if (res.state=='0'){
                console.log(this.$message.success("删除成功"))
              }else {
                console.log(this.$message.error("删除时出现未知错位"))
              }
              this.load()
            })

          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
    },

    //图片上传
    handleAvatarSuccess(res){
      console.log(res)
      this.form.imgurl=res.data
    },

    //根据标签查询
    select(fid){
      request.get("/food",{
        params:{
          cover:fid,
        }
      }).then(res=>{
        this.tableData=res.data.records
      })
    },

    //重置
    resetForm(){
      this.name = null;
      this.load()
    },

    //分页
    handleSizeChange(pageSize){
      this.pageSize=pageSize
      //之后请求数据
      this.load()
    },
    handleCurrentChange(pageNum){
      console.log(pageNum)
      this.pageNum=pageNum
      this.load()
    },
  },
};
</script>
<style lang='scss' scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.Articlefl {
  .topsearch {
    height: 15%;
    .el-form-item {
      // margin-bottom: 0;
    }
  }
    ::v-deep .el-table .myNoteBox .cell {
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      white-space: normal;
    }

    .clearfix {
      span {
        font-weight: bold;
      }
    }
  }

  ::v-deep .el-dialog__wrapper {
    .el-dialog {
      .el-dialog__body {
        .el-form {
          .el-form-item {
            .el-form-item__content {
              .quill-editor {
                .ql-container {
                  height: 200px;
                }
              }
            }
          }
        }
      }
    }
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.Articlefl {
  .treetable {
    margin-top: 20px;
    height: calc(90% - 20px);
    overflow-y: auto;
    // padding-bottom: 50px;

    .el-col-lg-4-8 {
      width: 20%;
    }

    .rowlist {
      .rowitem {
        border: 1px solid #ebeef5;
        padding: 5px;
        cursor: pointer;
        &:hover {
          border-color: #73b8ff;
        }
        img {
          height: 120px;
          width: 100%;
        }
        .label16 {
          font-size: 16px;
        }
      }
      .listbtn {
        display: flex;

        justify-content: space-around;
      }
    }

  }
}
</style>
